Day 13 Class與v-bind

2021 iThome 鐵人賽

DAY 11

自我挑戰組

13th鐵人賽

511 瀏覽

v-bind
v-bind常與class和style的綁定,可以用於綁定一個或是多個屬性(class、style),會以{}或是[]出現

當我將滑鼠放上text上,就會觸發title屬性

小提示:
v-bind除了完整的寫出 v-bind:屬性名稱,也可以直接簡寫成 :屬性名稱

這兩種寫法在瀏覽器渲染之後的結果是一樣的

常用修飾符
v-bind常用的修飾符有以下兩個

.prop : 將綁定的屬性設定為DOM property,而不是attribute
Attribute HTML的特性為字串
Property DOM的屬性可為任何值
.camel : 將有kebab-case的屬性名稱轉為camelCase
.attr : 將綁定屬性設定為DOM attribute

綁定多個class
原本在data內寫出陣列Class名稱,但似乎有點雜亂

因此可以改為下列,將多組的class放在data內的allClass裡面

系列文

新手遇上Vue.js 共 30 篇

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

立即登入留言